<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="550" height="400"></canvas>
<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = 'bold 22px Arial';
ctx.textAlign = 'center';

// --- Layout Coordinates ---
const y_center = 200;
const y_top = 130;
const y_bottom = 270;

const resistor_w = 90;
const resistor_h = 30;

const x_start = 50;
const x_arrow = 90;
const x_r_start = 120;
const x_r_end = x_r_start + resistor_w;
const x_j1 = x_r_end + 40;
const x_p_start = x_j1 + 30;
const x_p_end = x_p_start + resistor_w;
const x_j2 = x_p_end + 30;
const x_end = x_j2 + 70;

// --- Drawing Functions ---
function drawResistor(x, y, width, height) {
    ctx.strokeRect(x, y, width, height);
}

function drawJunction(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, 4, 0, 2 * Math.PI);
    ctx.fill();
}

function drawArrow(x, y) {
    const tip_x = x;
    const back_x = tip_x - 10;
    const height = 7;
    ctx.beginPath();
    ctx.moveTo(back_x, y - height);
    ctx.lineTo(tip_x, y);
    ctx.lineTo(back_x, y + height);
    ctx.stroke();
}

// --- Draw Circuit ---

// 1. Incoming line, Arrow, and Label I
ctx.beginPath();
ctx.moveTo(x_start, y_center);
ctx.lineTo(x_r_start, y_center);
ctx.stroke();
drawArrow(x_arrow, y_center);
ctx.textBaseline = 'middle';
ctx.fillText('I', x_arrow - 25, y_center);

// 2. Resistor R
ctx.textBaseline = 'bottom';
drawResistor(x_r_start, y_center - resistor_h / 2, resistor_w, resistor_h);
ctx.fillText('R', x_r_start + resistor_w / 2, y_center - resistor_h / 2 - 8);

// 3. Wire to Junction 1
ctx.beginPath();
ctx.moveTo(x_r_end, y_center);
ctx.lineTo(x_j1, y_center);
ctx.stroke();

// 4. Junction 1
drawJunction(x_j1, y_center);

// 5. Parallel Branches
// Top Branch (2.0 Ohm)
ctx.beginPath();
ctx.moveTo(x_j1, y_center);
ctx.lineTo(x_j1, y_top);
ctx.lineTo(x_p_start, y_top);
ctx.stroke();
drawResistor(x_p_start, y_top - resistor_h / 2, resistor_w, resistor_h);
ctx.fillText('2.0 \u03A9', x_p_start + resistor_w / 2, y_top - resistor_h / 2 - 8);
ctx.beginPath();
ctx.moveTo(x_p_end, y_top);
ctx.lineTo(x_j2, y_top);
ctx.lineTo(x_j2, y_center);
ctx.stroke();

// Bottom Branch (3.0 Ohm)
ctx.beginPath();
ctx.moveTo(x_j1, y_center);
ctx.lineTo(x_j1, y_bottom);
ctx.lineTo(x_p_start, y_bottom);
ctx.stroke();
drawResistor(x_p_start, y_bottom - resistor_h / 2, resistor_w, resistor_h);
ctx.textBaseline = 'top';
ctx.fillText('3.0 \u03A9', x_p_start + resistor_w / 2, y_bottom + resistor_h / 2 + 8);
ctx.beginPath();
ctx.moveTo(x_p_end, y_bottom);
ctx.lineTo(x_j2, y_bottom);
ctx.lineTo(x_j2, y_center);
ctx.stroke();

// 6. Junction 2
drawJunction(x_j2, y_center);

// 7. Outgoing wire
ctx.beginPath();
ctx.moveTo(x_j2, y_center);
ctx.lineTo(x_end, y_center);
ctx.stroke();

// 8. Figure Label
ctx.textBaseline = 'bottom';
ctx.fillText('Fig. 9.2', (x_j1 + x_j2)/2, 360);

</script>
</body>
</html>